import React, { Component } from 'react';
import {  NavLink } from 'react-router-dom' ;
class HotPro extends Component {
    constructor(props, context) {
        super(props)
        this.state = {
            data: []
        }
      }
    getCate(){
        fetch("/api/cate/list/1").then(res=>{
            return res.json();
          }).then((data) => {
              this.setState({
                data:data
              })
        })
    }
    componentDidMount(){
        this.getCate();
    }
    render() {
        console.log(this.state.data);
        return (
            <div>
               	<div className="container marketing center">
                    <div className="col-md-12 col-sm-12 hidden-xs city_page_category">
                    { this.state.data.map((item,index)=>{
                        return (<div className="city_page_category_detail" key={index}>
                        <NavLink to={`/product/list/${item._id}`} >
                            <div className="has-img-icon" href="/goods/womens-tart-set" style={{width: '100%'}} title={item.title}>
                                <img alt="${item.title}" className="img-responsive" src={item.img} style={{width: '100%'}} title={item.title}/>
                            </div>
                            <div className="product-category-link" href="/goods/womens-tart-set"></div>
                            <div style={{position: 'relative',marginTop: '-14%',color: 'white',fontSize: '1.2vw'}}>{item.title}</div>
                            </NavLink>
                    </div>)}) }
                        {/* <div className="city_page_category_detail">
                            <a href="/goods/womens-tart-set" style={{width: '100%'}}>
                                <div className="has-img-icon" href="/goods/womens-tart-set" style={{width: '100%'}} title="女神节精选">
                                    <img alt="女神节精选" className="img-responsive" src="http://image.pantrysbest.com/slideshows/1519962509665" style={{width: '100%'}} title="女神节精选"/>
                                </div>
                                <div className="product-category-link" href="/goods/womens-tart-set"></div>
                                <div style={{position: 'relative',marginTop: '-16%',color: 'white',fontSize: '1.2vw'}}>女神节精选</div>
                            </a>
                        </div>
                        <div className="city_page_category_detail">
                            <a href="/goods/financier-gold-brick-giftbox" style={{width: '100%'}}>
                                <div className="has-img-icon" href="/goods/financier-gold-brick-giftbox" style={{width: '100%'}} title="全国送">
                                    <img alt="全国送" className="img-responsive" src="http://image.pantrysbest.com/slideshows/1517211194781" style={{width: '100%'}} title="全国送"/>
                                </div>
                                <div className="product-category-link" href="/goods/financier-gold-brick-giftbox"></div>
                                <div style={{position: 'relative',marginTop: '-16%',color: 'white',fontSize: '1.2vw'}}>全国送</div>
                            </a>
                        </div>
                        <div className="city_page_category_detail">
                            <a href="https://www.pantrysbest.com/free_tast" style={{width: '100%'}}>
                                <div className="has-img-icon" href="https://www.pantrysbest.com/free_tast" style={{width: '100%'}} title="企业活动">
                                    <img alt="企业活动" className="img-responsive" src="http://image.pantrysbest.com/slideshows/1517211246501" style={{width: '100%'}} title="企业活动"/>
                                </div>
                                <div className="product-category-link" href="https://www.pantrysbest.com/free_tast"></div>
                                <div style={{position: 'relative',marginTop: '-16%',color: 'white',fontSize: '1.2vw'}}>企业活动</div>
                            </a>
                        </div>
                        <div className="city_page_category_detail">
                            <a href="/categories/cakes" style={{width: '100%'}}>
                                <div className="has-img-icon" href="/categories/cakes" style={{width: '100%'}} title="生日蛋糕">
                                    <img alt="生日蛋糕" className="img-responsive" src="http://image.pantrysbest.com/slideshows/1517211260127" style={{width: '100%'}} title="生日蛋糕"/>
                                </div>
                                <div className="product-category-link" href="/categories/cakes"></div>
                                <div style={{position: 'relative',marginTop: '-16%',color: 'white',fontSize: '1.2vw'}}>生日蛋糕</div>
                            </a>
                        </div>
                        <div className="city_page_category_detail">
                            <a href="/categories/strawberry-season" style={{width: '100%'}}>
                                <div className="has-img-icon" href="/categories/strawberry-season" style={{width: '100%'}} title="恋恋草莓季">
                                    <img alt="恋恋草莓季" className="img-responsive" src="http://image.pantrysbest.com/slideshows/1517211273050" style={{width: '100%'}} title="恋恋草莓季"/>
                                </div>
                                <div className="product-category-link" href="/categories/strawberry-season"></div>
                                <div style={{position: 'relative',marginTop: '-16%',color: 'white',fontSize: '1.2vw'}}>恋恋草莓季</div>
                            </a>
                        </div> */}
                    </div>
                    <div className="row" style={{marginBottom: '0'}}> 
                    </div>
                </div>
            </div>
        );
    }
}

export default HotPro;
